<template>
	<view class="yuEBao">
		<!-- 头部导航 -->
		<view class="w-750 w-bj-tr" style="position: fixed; top: 0; left: 0; z-index: 999;">
			<view class="h-100 w-row-justify-between-align">
				<view class="wh-80 w-row-center" @click="routerBack()">
					<image class="wh-40" src="../../../static/gane/goBack-white-icon.png"></image>
				</view>
				<view class="w-350 h-100 w-row-center w-wz-conts font-36">
					<text>余额宝</text>
				</view>
				<view class="wh-80 w-row-center">
					<!-- <uni-datetime-picker type="datetimerange" @change="changeTiem">
						<image class="wh-50" src="../../../static/gane/rq.png"></image>
					</uni-datetime-picker> -->
				</view>
			</view>
		</view>
		<view class="bwh-120"></view>
		<!-- 头部导航结束 -->

		<view class="cover-tw index-bg absolute-default fixed"></view>

		<view class="content-box padding-sm padding-top-xs rel">
			<view class="btn line-height-xs" @click="toPath('/pages/my/yuEBao/priceList')">
				账单明细
			</view>

			<view class="text-color-white text-center margin-top-sm text-sml">
				<view class="padding-bottom-xs">
					总金额 (元)
				</view>
				<view class="text-xxl text-bold number-font">
          {{banlanceBaoInfo.balance}}
				</view>
			</view>

			<view class="bg-white radius-default overflow margin-top" style="border-radius: 6px 6px 25px 25px;">
				<view
					class="bg-blue text-color-white padding-left-sm padding-right-sm text-left padding-top-xs overflow">
					<view class="van-space van-space--horizontal van-space--align-center">
						<view class="van-space-item">
							<image src="@/static/gane/81.png" mode="widthFix" class="round yuebao-avatar"
								style="margin-right: 8px;">
							</image>
						</view>
						<view class="van-space-item">
							<view class="user-info-yuebao">
								<view class="text-sm margin-top-xxs">
									{{userInfo?.nickname || '游客'}}
								</view>
								<span class="vip-tag small noy v0"></span>
							</view>
						</view>
					</view>

					<view class="fr disflex" style="margin-top: 12px;" @click="openTips()">
						收益说明
						<image class="gzi" src="@/static/gane/gzi.png" mode=""></image>
					</view>
				</view>

				<view class="padding-sm margin-top-sm">
					<view class="van-row">
						<view class="van-col van-col--8 text-center">
							<view class="number-font text-slg text-color-blue line-height-sm">
								{{banlanceBaoInfo.y_income}}
							</view>
							<view class="">
                昨日收益
							</view>
						</view>
            <view class="van-col van-col--8 text-center">
              <view class="number-font text-slg text-color-blue line-height-sm">
                {{banlanceBaoInfo.balance_income}}
              </view>
              <view class="">
                累计收益
              </view>
            </view>
            <view class="van-col van-col--8 text-center">
              <view class="number-font text-slg text-color-blue line-height-sm">
                {{vipInfo.balance_income}}%
              </view>
              <view class="">
                日收益率
              </view>
            </view>
					</view>

					<view class="van-row margin-top">
						<view class="van-col van-col--12" style="padding-right: 7.5px;">
							<button type="button" @click="openPricePop(2)"
								class="van-button van-button--primary van-button--normal van-button--plain van-button--block"
								style="color: rgb(25, 137, 250) !important; border-color: rgb(25, 137, 250) !important;">
								<div class="van-button__content"><span class="van-button__text">转出</span></div>
							</button>

						</view>
						<view class="van-col van-col--12" style="padding-right: 7.5px;">
							<button type="button" @click="openPricePop(1)"
								class="van-button van-button--primary van-button--normal van-button--block"
								style="color: white; background: rgb(25, 137, 250) !important; border-color: rgb(25, 137, 250) !important;">
								<div class="van-button__content"><span class="van-button__text">转入</span></div>
							</button>
						</view>
					</view>

					<image @click="toPath('/pages/my/yuEBao/memberList')" src="@/static/mine/upgrade.png"
						mode="widthFix" class="full-width fl margin-top-xs"></image>
				</view>
			</view>

			<view class="padding-left-lg padding-right-lg margin-top">
				<image src="@/static/mine/bottom.png" mode="widthFix" class="full-width"></image>
				<view class="text-center margin-top">
					<button type="button" @click="routerCustomer()"
						class="van-button van-button--primary van-button--small van-button--plain van-button--round bg-none"
						style="color: rgb(25, 137, 250) !important; border-color: rgb(25, 137, 250) !important;">
						<div class="van-button__content"><span class="van-button__text">专属客服</span></div>
					</button>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="gameDetailBox">
				<view class="padding-sm">
					<view class=" padding-bottom-sm title">
						收益说明
						<div>每日收益如：vip1每日存款平台余额宝5000，则当日收益为2.5元，vip等级越高每日收益越高。</div>
						<div>每日收益如：vip1每日存款平台余额宝5000，则当日收益为2.5元，vip等级越高每日收益越高。</div>
						<image class="close-icon" src="@/static/index/close-icon.png" @click="close"></image>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 转入转出 -->
		<uni-popup ref="pricePopup" type="bottom" border-radius="10px 10px 0 0">
			<view class="gameDetailBox padding-bot-0">
				<view class="padding-sm padding-top-sm">
					<view class=" title text-default text-bold text-color-black">
						{{popType == 2 ? '转出至钱包' : '转入至余额宝'}}
						<image class="close-icon" src="@/static/index/close-icon.png" @click="closePricePop()"></image>
					</view>

					<view class="van-cell van-field van-field--label-top margin-top">
						<view class="van-cell__title van-field__label van-field__label--top">
							<span>请输入金额</span>
						</view>
						<view class="van-cell__value van-field__value">
							<view class="van-field__body">
								<input type="text" inputmode="decimal" id="van-field-1-input" class="van-field__control"
									:placeholder="moneyMsg" aria-labelledby="van-field-1-label" v-model="price">
							</view>
						</view>
					</view>

					<view class="van-row margin-top">
						<view class="van-col van-col--8" style="padding-right: 15rpx;">
							<button type="button"
								class="van-button van-button--primary van-button--normal van-button--plain van-button--block"
								style="color: rgb(25, 137, 250) !important; border-color: rgb(25, 137, 250) !important;">
								<div class="van-button__content"><span class="van-button__text">取消</span></div>
							</button>
						</view>

						<div class="van-col van-col--16" style="padding-left: 7.5px;" ><button @click="banlanceBaoChange" type="button"
								class="van-button van-button--primary van-button--normal van-button--block"
								:disabled="!price"
								:class="{'van-button--disabled': !price}"
								style="color: white; background: rgb(25, 137, 250) !important; border-color: rgb(25, 137, 250) !important;">
								<div class="van-button__content" ><span class="van-button__text">确认转入</span></div>
							</button></div>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import $H from '@/pages/common/request.js'
import $C from '@/pages/common/config.js';

	export default {
		data() {
			return {
        moneyMsg:'最多可转出¥0.00',
        banlanceBaoInfo:{
          balance:'0.00',//总余额
          balance_income:'0.00',//总收益
          y_income:'0.00',//昨日收益
          earning_rate:'0.00',//当前收益率
        },
        vipInfo:{
          balance_income:'0.00'
        },
				priceList: [{
						title: '昨日收益',
						num: '0.00'
					},
					{
						title: '累计收益',
						num: '0.00'
					},
					{
						title: '日收益率',
						num: '0.00%'
					}
				],
				userInfo: null,
				popType: 1,
				price: null
			}
		},
		created() {
			this.getUserInfo()
      this.getBanlanceBao()
		},
		methods: {
      getUserInfo() {
        $H.post('/app_user_get_userinfo').then((res) => {
          if (res.code == 200) {
            this.userInfo = res.data
            this.moneyMsg = "最多可转入¥"+this.userInfo?.money;
          }
        })
      },
      getBanlanceBao() {
        $H.post('/banlance_bao_info').then((res) => {

          if (res.code == 200) {
            this.banlanceBaoInfo = res.data.balanceBao
            this.vipInfo = res.data.vip
            this.moneyMsg = "最多可转出¥"+this.banlanceBaoInfo?.money;
          }
        })
      },
      banlanceBaoChange(){
        const formData = {
          type: this.popType,
          turnover: this.price,
        }
        $H.post('/banlance_bao_change',formData).then((res) => {

          this.getBanlanceBao();
          this.getUserInfo();
          this.$refs.pricePopup.close()
          return uni.showToast({
            title: res.msg,
            duration: 1000,
            icon: 'none'
          });

        })
      },
			openTips() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},

			openPricePop(type) {
        this.price = null
				this.popType = type
        if(type==2){
          const balance = this.banlanceBaoInfo?.balance ? this.banlanceBaoInfo?.balance :'0.00';
          this.moneyMsg = "最多可转出¥"+balance;
        }else{
          this.moneyMsg = "最多可转入¥"+this.userInfo?.money;
        }
				this.$refs.pricePopup.open()
			},
			closePricePop() {
				this.$refs.pricePopup.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	.w-row-center {
		color: #fff !important;
	}

	.index-bg {
		background-image: url('@/static/gane/rebate.webp');
		transform: translateY(-35px);
	}

	.btn {
		background-color: #cbe0fc;
		color: #1989fa;
		border-radius: 13.33333vw 0 0 13.33333vw;
		position: absolute;
		right: -1px;
		top: 9.33333vw;
		z-index: 10;
		padding: .8vw 4.26667vw .53333vw 3.2vw;
		font-size: 3.2vw;
	}

	.yuebao-avatar {
		width: 8.53333vw;
		height: 8.53333vw;
	}

	.small {
		width: 11.46667vw;
		height: 4.26667vw;
		transform: translateY(0);
	}

	.gzi {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}

	.van-button--small.van-button--round {
		padding: 0 5.33333vw !important;
	}
	
	

	.gameDetailBox {
		padding-bottom: 140rpx;
		background-color: #fff;
		font-size: 24rpx !important;
		color: #535d76;
		line-height: 50rpx;

		.title {
			position: relative;
			padding-right: 60rpx;

			.close-icon {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: 0;
				margin-top: 10rpx;
				right: 0;
			}
		}
	}

	
</style>